<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>CheckBox Widget Demo</title>

	<style type="text/css">
		@import "../../themes/claro/document.css";
		@import "../css/dijitTests.css";

		label { margin-right: 0.80em; }
	</style>


	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, parseOnLoad: true"></script>

	<!-- only needed for alternate theme testing: -->
	<script type="text/javascript" src="../_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("doh.runner");
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.form.CheckBox");
		dojo.require("dijit.form.RadioButton");
		dojo.require("dijit.form.Form");

		function defaultSubmitHandler(values){
			console.debug('actual submitted values: ' + dojo.toJson(values));
		}
		submittedValues = defaultSubmitHandler;

		function reportChecked(checked) {
			dojo.byId("oncheckedoutput").innerHTML = checked;
		}

		function reportValueChanged(value) {
			dojo.byId("onvaluechangedoutput").innerHTML = value;
		}

		dojo.addOnLoad(function(){
			var params = {id: "cb6", name: "cb6", checked: true };
			new dijit.form.CheckBox(params, "cb6");
			
			new dijit.form.RadioButton({
				checked: true,
				value: "tea",
				name: "drink"
			}, "g4rb1");
			new dijit.form.RadioButton({
				value: "coffee",
				name: "drink"
			}, "g4rb2");

		});
	</script>
</head>
<body class="claro">

	<h1 class="testTitle">Dijit CheckBox Test</h1>
	<p>
	Here are some checkboxes.  Try clicking, and hovering, tabbing, and using the space bar to select:
	</p>
	<!--    to test form submission, you'll need to create an action handler similar to
		http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
	<form id="myForm" data-dojo-type="dijit.form.Form" data-dojo-props='action:"../formAction.html", method:"", target:"formSubmitIframe"'>
		<input type="checkbox" id="cb0" checked/>
			<label for="cb0">cb0: Vanilla (non-dojo) checkbox (for comparison purposes)</label>
		<br>
		<input id="cb1" data-dojo-id="cb1" data-dojo-type="dijit.form.CheckBox" data-dojo-props='name:"cb1", value:"foo", onClick:function(){ console.log("clicked cb1") }'/>
			<label for="cb1">cb1: normal checkbox, with value=foo, clicking generates console log messages</label>
			<button type=button onclick="alert(dijit.byId('cb1').get('value'));">get('value')</button>
		<br>
		<input id="cb2" data-dojo-type="dijit.form.CheckBox" data-dojo-props='onChange:reportChecked, name:"cb2", checked:true'/>
			<label for="cb2">cb2: normal checkbox, with default value, initially turned on.</label>
			<span>"onChange" handler updates: [<span id="oncheckedoutput"></span>]</span>
			<button type=button onclick="alert(dijit.byId('cb2').get('value'));">get('value')</button>
		<br>
		<input id="cb3" data-dojo-type="dijit.form.CheckBox" data-dojo-props='name:"cb3", disabled:true'/>
			<label for="cb3">cb3: disabled checkbox</label>
		<br>
		<input id="cb4" data-dojo-type="dijit.form.CheckBox" data-dojo-props='name:"cb4", readOnly:true, checked:true'/>
			<label for="cb4">cb4: readOnly checkbox, turned on</label>
		<br>
		<input id="cb5" data-dojo-type="dijit.form.CheckBox" data-dojo-props='name:"cb5", value:"", onClick:function(){ console.log("clicked cb5"); }'/>
			<label for="cb5">cb5: normal checkbox, with specified value="", clicking generates console log messages</label>
			<button type=button onclick="alert(dijit.byId('cb5').get('value'));">get('value')</button>
		<br>
		<input id="cb6"/>
			<label for="cb6">cb6: instantiated from script</label>
		<br>
		<input id="cb7" data-dojo-type="dijit.form.CheckBox" data-dojo-props='onChange:reportValueChanged, name:"cb7" '/>
			<label for="cb7">cb7: normal checkbox.</label>
			<input type="button" onclick='dijit.byId("cb7").set("disabled",true);' value="disable" />
			<input type="button" onclick='dijit.byId("cb7").set("disabled",false);' value="enable" />
			<input type="button" onclick='dijit.byId("cb7").set("value", "fish");' value='set value to "fish"' />
			<input type="button" onclick='dijit.byId("cb7").reset();' value='Reset value+checked' />
			<span>"onChange" handler updates: [<span id="onvaluechangedoutput"></span>]</span>
		<br>
	<p>
	Here are some radio buttons.  Try clicking, and hovering, tabbing, and arrowing
	</p>
		<p>
			<span>Radio group #1:</span>
			<input id="g1rb1" data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"g[1]", value:"news" '/>
			<label for="g1rb1">news</label>
			<input id="g1rb2" data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"g[1]", value:"talk", checked:true'/>
			<label for="g1rb2">talk</label>
			<input id="g1rb3" data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"g[1]", value:"weather", disabled:true'/>
			<label for="g1rb3">weather</label>
			<input type="button" id="enableWeatherButton" onclick='dijit.byId("g1rb3").set("disabled",false);' value="enable weather" />
			<input type="button" onclick='dijit.byId("g1rb3").set("disabled",true);' value="disable weather" />
		</p>
		<p>
			<span>Radio group #2: (no default value, and has breaks)</span><br>
			<input id="g2rb1" data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"g2", value:"top40" '/>
			<label for="g2rb1">top 40</label><br>
			<input id="g2rb2" data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"g2", value:"oldies" '/>
			<label for="g2rb2">oldies</label><br>
			<input id="g2rb3" data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"g2", value:"country" '/>
			<label for="g2rb3">country</label><br>
			(Note if using keyboard: tab to navigate, and use arrow or space to select)
		</p>
		<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"submit", value:"Submit"'>Submit</button>
		<button data-dojo-type="dijit.form.Button" data-dojo-props='type:"reset"'>HTML Reset</button>
	</form>

	<p>
		<span>Radio group #3 (native radio buttons):</span>
		<input type="radio" name="g3" id="g3rb1" value="rock"/>
		<label for="g3rb1">rock</label>
		<input type="radio" name="g3" id="g3rb2" value="jazz" disabled="disabled"/>
		<label for="g3rb2">jazz</label>
		<input type="radio" name="g3" id="g3rb3" value="classical" checked="checked"/>
		<label for="g3rb3">classical</label>
	</p>

	<div style='border:1px solid gray;'>
		These 6 radio buttons have the same name but are in separate forms so they can be selected independently.
		<form>
			1:
			<input id='b1' data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"a1", value:"1"'/><label for='b1'>b1</label>
			<input id='b2' data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"a1", value:"2"'/><label for='b2'>b2</label>
		</form>
		<form>
			2:
			<input id='c1' data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"a1", value:"1"'/><label for='c1'>c1</label>
			<input id='c2' data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"a1", value:"2"'/><label for='c2'>c2</label>
		</form>
		<div>
			3:
			<input id='d1' data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"a1", value:"1"'/><label for='d1'>d1</label>
			<input id='d2' data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"a1", value:"2"'/><label for='d2'>d2</label>
		</div>
	</div>
	
	<div>
		<span>Programmatic radio buttons:</span>
		<form id="myform">
			<input type="radio" name="drink" id="g4rb1" checked value="tea"/> <label for="g4rb1">Tea</label> <br />
			<input type="radio" name="drink" id="g4rb2" checked value="coffee"/> <label for="g4rb2">Coffee</label> <br />
		</form>
	</div>
<iframe name="formSubmitIframe" src="about:blank" onload="if(this.values)submittedValues(this.values)" style="display:none;"></iframe>
</body>
</html>
